<template>
    <div class="app-container">
        <div class="customContainer">
            <!-- 头 -->
            <div class="customHeader">
                <div class="pull-left">
                    {{machineInfo.store_name}}&#x3000;{{machineInfo.area_name}}&#x3000;{{machineInfo.machine_type}}&#x3000;机台编号：{{machineInfo.no}}&#x3000;机台ID：{{machineInfo.machine_id}}
                </div>
            </div>
            <!-- 列表 -->
            <el-table  highlight-current-row :data="list" v-loading.body="listLoading" border fit
                size="small">
                <el-table-column align="center" label='序号' width="50">
                    <template slot-scope="scope">
                        <span class="indexColor">{{scope.$index+1}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="图片" width="80">
                    <template slot-scope="scope">
                        <img :src="scope.row.img" width="60" height="60" alt="">
                    </template>
                </el-table-column>
                <el-table-column align="center" label='新礼品编号' prop="gift_id"></el-table-column>
                <el-table-column align="center" label="神采礼品编号" prop="no_obsolete"></el-table-column>
                <el-table-column align="center" label='礼品名称' prop="gift_name"></el-table-column>
                <el-table-column align="center" label="礼品数量" prop="gift_num"></el-table-column>
                <el-table-column align="center" label='关联卡头' prop="clevice_id"></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import {
        getList,
    } from "@/api/information/machine_gift_mapping";
    export default {
        data() {
            return {
                machineInfo: '',
                list: null,
                listLoading: false,
                formInline: { machine_id: '' },
            };
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {//当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
                vm.beforeComingIn();
            })
        },
        methods: {
            beforeComingIn() {
                if (this.$route.params.routerflag||this.formInline.machine_id != this.$route.params.machine_id) {
                    this.formInline.machine_id = this.$route.params.machine_id;
                    this.fetchData();
                }
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                getList(this.formInline).then(response => {
                    this.machineInfo = response.machine;
                    this.list = response.list;
                    this.listLoading = false;
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
        }
    };
</script>